import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';

// Simple text-based icons
const Icon = ({ name, size = 24, color = '#000' }) => {
  const iconMap = {
    'arrow-back': '⬅️',
    'circle': '●',
  };

  return (
    <Text style={{ fontSize: size, color, textAlign: 'center' }}>
      {iconMap[name] || '📱'}
    </Text>
  );
};

const ApprovalDetails = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const { application } = route.params || {};

  // Mock approval flow data
  const approvalFlow = [
    {
      id: 1,
      name: application?.applicant || '申请人',
      role: '发起申请',
      action: '发起申请',
      time: application?.applicationTime || '2022-12-07 15:00',
      status: 'completed',
    },
    {
      id: 2,
      name: '张云',
      role: '部门领导',
      action: '等待审批',
      time: '',
      status: 'pending',
    },
    {
      id: 3,
      name: '梨花',
      role: '人事部',
      action: '等待审批',
      time: '',
      status: 'pending',
    },
  ];

  const getStatusColor = (status) => {
    switch (status) {
      case '待审批':
        return '#ff4757';
      case '正在审批中':
        return '#2ed573';
      case '已通过':
        return '#2ed573';
      case '已拒绝':
        return '#ff4757';
      default:
        return '#747d8c';
    }
  };

  const renderApprovalStep = (step, index) => (
    <View key={step.id} style={styles.approvalStep}>
      <View style={styles.stepLeft}>
        <View style={[
          styles.stepCircle,
          step.status === 'completed' ? styles.completedCircle : styles.pendingCircle
        ]}>
          <Text style={styles.stepNumber}>{index + 1}</Text>
        </View>
        {index < approvalFlow.length - 1 && (
          <View style={styles.stepLine} />
        )}
      </View>
      
      <View style={styles.stepContent}>
        <View style={styles.stepHeader}>
          <Text style={styles.stepName}>{step.name}</Text>
          <View style={styles.roleTag}>
            <Text style={styles.roleText}>{step.role}</Text>
          </View>
        </View>
        <Text style={[
          styles.stepAction,
          step.status === 'pending' && { color: '#ff4757' }
        ]}>
          {step.action}
        </Text>
        {step.time && (
          <Text style={styles.stepTime}>{step.time}</Text>
        )}
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={20} color="#333" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>审批详情</Text>
        <View style={styles.headerSpacer} />
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {/* Application Details Card */}
        <View style={styles.card}>
          <View style={styles.applicationHeader}>
            <View style={styles.titleContainer}>
              <Icon name="circle" size={12} color="#2196F3" />
              <Text style={styles.applicationTitle}>
                {application?.applicant || '申请人'}{application?.title || '转正申请'}
              </Text>
            </View>
            <Text style={[
              styles.statusText,
              { color: getStatusColor(application?.status) }
            ]}>
              {application?.status || '正在审批中'}
            </Text>
          </View>

          <View style={styles.detailsContainer}>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>审批编号:</Text>
              <Text style={styles.detailValue}>25002</Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>所在部门:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.department || '技术部'}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>岗位:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.position || '技术员'}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>入职时间:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.entryDate || '2022-08-10'}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>对本岗位的理解:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.understanding || '暂无内容'}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>个人工作规划:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.workPlan || '暂无内容'}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>对公司的意见和建议:</Text>
              <Text style={styles.detailValue}>
                {application?.data?.suggestions || '暂无内容'}
              </Text>
            </View>
          </View>
        </View>

        {/* Approval Flow Card */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>审批流程</Text>
          <View style={styles.approvalFlow}>
            {approvalFlow.map((step, index) => renderApprovalStep(step, index))}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  headerSpacer: {
    width: 28,
  },
  content: {
    flex: 1,
    padding: 16,
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
  },
  applicationHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  applicationTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginLeft: 8,
  },
  statusText: {
    fontSize: 14,
    fontWeight: '500',
  },
  detailsContainer: {
    gap: 12,
  },
  detailRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  detailLabel: {
    fontSize: 14,
    color: '#666',
    width: 100,
    flexShrink: 0,
  },
  detailValue: {
    fontSize: 14,
    color: '#333',
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 16,
  },
  approvalFlow: {
    gap: 20,
  },
  approvalStep: {
    flexDirection: 'row',
  },
  stepLeft: {
    alignItems: 'center',
    marginRight: 16,
  },
  stepCircle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  completedCircle: {
    backgroundColor: '#6c5ce7',
  },
  pendingCircle: {
    backgroundColor: '#ddd',
  },
  stepNumber: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  stepLine: {
    width: 2,
    height: 40,
    backgroundColor: '#e0e0e0',
    marginTop: 8,
  },
  stepContent: {
    flex: 1,
  },
  stepHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  stepName: {
    fontSize: 14,
    fontWeight: '500',
    color: '#333',
    marginRight: 8,
  },
  roleTag: {
    backgroundColor: '#f0f0f0',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
  },
  roleText: {
    fontSize: 12,
    color: '#666',
  },
  stepAction: {
    fontSize: 14,
    color: '#333',
    marginBottom: 4,
  },
  stepTime: {
    fontSize: 12,
    color: '#999',
  },
});

export default ApprovalDetails;
